import React, { useState, useEffect } from 'react'
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'
import { EditorState, convertToRaw, ContentState } from 'draft-js';
export default function NewsEditor(props) {
    const [editorState, setEditorState] = useState("")
    useEffect(()=>{
        // // console.log(props.content)
        // html-===> draft, 
        const html = props.content
        if(html===undefined) return 
        const contentBlock = htmlToDraft(html);
        if (contentBlock) {
          const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
          const editorState = EditorState.createWithContent(contentState);
          setEditorState(editorState)
        }
    },[props.content])
    return (
        <div style={{height:"500px"}}>
            <Editor
            style={{
                minHeight:"500px",
                background: "#FAFAFA",
                overflow: "auto"
            }}
                editorState={editorState}
                toolbarClassName="toolbarClassName"
                wrapperClassName="wrapperClassName"
                editorClassName="editorClassName"
                onEditorStateChange={(value)=>{setEditorState(value)}}
                onBlur={()=>{
                    // console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))
                    // 传给父组件
                    props.getContent(draftToHtml(convertToRaw(editorState.getCurrentContent())))
                }}
            />
        </div>
    )
}
